<template>
  <div class="task-filter-container">
    <el-form :inline="true" :model="filterForm" @submit.prevent="handleSearch">
      <el-form-item label="任务编号">
        <el-input v-model="filterForm.taskCode" placeholder="请输入任务编号" clearable style="width: 160px;" />
      </el-form-item>

      <el-form-item label="创建人">
        <el-input v-model="filterForm.creator" placeholder="请输入创建人" clearable style="width: 120px;" />
      </el-form-item>

      <el-form-item label="执行人">
        <el-input v-model="filterForm.executor" placeholder="请输入执行人" clearable style="width: 120px;" />
      </el-form-item>

      <el-form-item label="状态">
        <el-select 
          v-model="filterForm.taskStatus" 
          placeholder="请选择状态" 
          clearable
          style="width: 120px;"
          popper-append-to-body
        >
          <el-option label="待巡视" value="待巡视" />
          <el-option label="巡视中" value="巡视中" />
          <el-option label="待上传" value="待上传" />
          <el-option label="已完成" value="已完成" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElSelect,
  ElOption,
  ElButton,
} from 'element-plus';

const emit = defineEmits(['search', 'reset']);

// 筛选表单的数据模型
const initialForm = {
  taskCode: '',
  creator: '',
  executor: '',
  taskStatus: '',
};
const filterForm = reactive({ ...initialForm });

// 搜索事件
const handleSearch = () => {
  // 过滤掉空值参数
  const params = Object.entries(filterForm).reduce((acc, [key, value]) => {
    if (value !== '' && value !== null) {
      acc[key] = value;
    }
    return acc;
  }, {});
  emit('search', params);
};

// 重置事件
const handleReset = () => {
  Object.assign(filterForm, initialForm);
  emit('reset');
};
</script>

<style lang="scss" scoped>
.task-filter-container {
  background-color: #fafafa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  
  :deep(.el-select) {
    .el-input__wrapper {
      min-width: 120px;
    }
  }
}

// 全局样式，确保下拉菜单正确显示
:deep(.el-select-dropdown) {
  z-index: 9999 !important;
}
</style>